<!-- checkout module -->
<ul id="checkout-nav" class="nav">
    <li id="checkout-nav-step-1" class="finished"><strong>1</strong>Giỏ hàng của bạn</li>
    <li id="checkout-nav-step-2"><strong>2</strong>Nhập địa chỉ giao hàng</li>
    <li id="checkout-nav-step-3"><strong>3</strong>Xác nhận đơn hàng</li>
</ul>

<div id="checkout">
    <input type="hidden" id="step-tracking" value="{$step}">

    <div id="checkout-step-1" class="checkout-step">
    {if count($checkout_items['items']) > 0}
        <!-- Các sản phẩm trong giỏ hàng -->
        <table id="checkout-items">
            <thead>
            <tr>
                <th>Sản phẩm</th>
                <th>Giá</th>
                <th>Số lượng</th>
                <th>Thành tiền</th>
                <th>Xóa</th>
            </tr>
            </thead>

            <tbody>
                {foreach $checkout_items['items'] as $item}
                <tr id="item-{$item.id}" class="transition">
                    <td class="item-general">
                        <img src="{$item.dt_image_url}" alt="{$item.dt_ten}"
                             class="checkout-item-image item-large-image">
                        <a href="dien-thoai/{$item.dt_id_seo}" target="_blank">{$item.dt_ten}</a>
                    </td>

                    <td class="item-price">{$item.dt_gia_formatted}</td>

                    <td class="item-quantity">
                        <input type="text" class="{id: '{$item.dt_id}'}" value="{$item.quantity}"/>
                    </td>

                    <td class="total">{$item.total_formatted}</td>
                    <td class="item-delete">
                        <a href="#" class="item-delete  {id: '{$item.dt_id}'}"><img src="images/remove.png"
                                                                                    alt="Xóa điện thoại {$item.dt_ten} ra khỏi giỏ hàng"></a>
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table><!-- /#checkout-items -->
        <div id="checkout-total-wrap">
            Tổng giá trị: <div id="checkout-total">{$checkout_items.total_formatted}</div>
        </div>
        {else}
        <h2 class="error">Giỏ hàng rỗng, quý khách hãy thực hiện mua hàng trước!</h2>
    {/if}
    </div>

    <div id="checkout-step-2" class="checkout-step">
        <div class="note">
            Quý khách vui lòng
            {if UserController::isLogged()}
                <a href="#" id="get-info-link" class="slink">dùng thông tin KH</a>
            {else}
                <a href="dang-nhap/thanh-toan" class="slink" id="login-link">đăng nhập</a>
            {/if}
            hoặc điền đầy đủ thông tin bên dưới để chúng tôi liên lạc và giao hàng
        </div>
        <form id="checkout-info" class="form-horizontal">
            <div class="control-group">
                <label for="hoten" class="control-label">Họ tên khách hàng</label>
                <div class="controls">
                    <input type="text" id="hoten" name="hoten" class="required">
                </div>
            </div>

            <div class="control-group">
                <label for="diachi" class="control-label">Địa chỉ giao hàng</label>

                <div class="controls">
                    <input type="text" id="diachi" name="diachi" class="required"
                            title="để trống nếu nhận hàng tại công ty" style="width: 300px;">
                </div>
            </div>
            <div class="control-group">
                <label for="sodt" class="control-label">Số điện thoại liên lạc</label>

                <div class="controls">
                    <input type="text" id="sodt" name="sodt" class="required">
                </div>
            </div>

            <!-- Đăng kí khách hàng -->
            {if !UserController::isLogged()}
            <div class="control-group">
                <label class="control-label" for="dangki">Đăng kí</label>

                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" name="dangki" id="dangki">Đăng kí làm khách hàng thành viên
                    </label>
                </div>
            </div>
            <fieldset id="register-group" style="display: none;">
                <div class="control-group">
                    <label for="username" class="control-label">Tên đăng nhập</label>

                    <div class="controls">
                        <input type="text" id="username" name="username" class="required">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="email">Email</label>

                    <div class="controls">
                        <input type="text" id="email" name="email" class="required">
                    </div>
                </div>
                <div class="control-group">
                    <label for="password" class="control-label">Mật khẩu</label>

                    <div class="controls">
                        <input type="password" id="password" name="password" class="required">
                    </div>
                </div>
                <div class="control-group">
                    <label for="re-password" class="control-label">Nhập lại mật khẩu</label>
                    <div class="controls">
                        <input type="password" id="re-password" name="rPassword" class="required">
                    </div>
                </div>

            </fieldset>
            {/if} <!-- /Đăng kí thành viên -->

        </form>
    </div>

    <div id="checkout-step-3" class="checkout-step">
        <div class="note">Các sản phẩm trong đơn đặt hàng</div>
        <table>
            <thead>
            <tr>
                <th>Tên sản phẩm</th>
                <th>Đơn giá</th>
                <th>Số lượng</th>
                <th>Thành tiền</th>
            </tr>
            </thead>
            <tbody id="checkout-detail">
            <tr>
                <td>Sản phẩm 1</td>
                <td>18,999,000 VND</td>
                <td>2</td>
                <td>37,998,000 VND</td>
            </tr>
            <tr>
                <td>Sản phẩm 1</td>
                <td>18,999,000 VND</td>
                <td>2</td>
                <td>37,998,000 VND</td>
            </tr>
            <tr>
                <td>Sản phẩm 1</td>
                <td>18,999,000 VND</td>
                <td>2</td>
                <td>37,998,000 VND</td>
            </tr>
            <tr>
                <td>Sản phẩm 1</td>
                <td>18,999,000 VND</td>
                <td>2</td>
                <td>37,998,000 VND</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="3">Tổng giá trị đơn hàng</th>
                <td id="checkout-confirm-total"></td>
            </tr>
            </tfoot>
        </table>
        <div class="note">Thông tin khách hàng</div>
        <table id="checkout-confirm-kh">
            <tbody>
            <tr>
                <td>Họ tên</td>
                <td id="checkout-confirm-ten"></td>
            </tr>
            <tr>
                <td>Địa chỉ</td>
                <td id="checkout-confirm-diachi"></td>
            </tr>
            <tr>
                <td>Số điện thoại</td>
                <td id="checkout-confirm-sodt"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="buttons">
        {if count($checkout_items['items']) > 0}
            <a id="next-step" class="step-1"><img src="images/check.png"><span>Bước tiếp theo</span></a>
        {/if}
        <a href="/">Mua thêm hàng</a>
    </div>
</div>
<!-- /checkout module -->

{css style/shop-checkout.css}
{js scripts/shop-checkout.js}